<template>
  <div class="index-container">
    <!-- 数据概览卡片 -->
    <el-row class="data-overview" :gutter="20">
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-icon" style="background-color: rgba(24, 144, 255, 0.1)">
            <vab-icon :icon="['fas', 'user-graduate']" style="color: #1890FF" />
          </div>
          <div class="overview-content">
            <div class="overview-title">全国考生人数</div>
            <div class="overview-data">{{ formatNumber(totalStudents) }}人</div>
            <div class="overview-footer">
              <span :class="studentGrowth >= 0 ? 'up' : 'down'">
                <vab-icon :icon="['fas', studentGrowth >= 0 ? 'arrow-up' : 'arrow-down']" />
                {{ Math.abs(studentGrowth) }}%
              </span>
              <span class="period">较去年</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-icon" style="background-color: rgba(82, 196, 26, 0.1)">
            <vab-icon :icon="['fas', 'chart-pie']" style="color: #52c41a" />
          </div>
          <div class="overview-content">
            <div class="overview-title">本科录取率</div>
            <div class="overview-data">{{ admissionRate }}%</div>
            <div class="overview-footer">
              <span :class="admissionRateGrowth >= 0 ? 'up' : 'down'">
                <vab-icon :icon="['fas', admissionRateGrowth >= 0 ? 'arrow-up' : 'arrow-down']" />
                {{ Math.abs(admissionRateGrowth) }}%
              </span>
              <span class="period">较去年</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-icon" style="background-color: rgba(250, 173, 20, 0.1)">
            <vab-icon :icon="['fas', 'university']" style="color: #faad14" />
          </div>
          <div class="overview-content">
            <div class="overview-title">重点大学数量</div>
            <div class="overview-data">{{ formatNumber(keyUniversities) }}所</div>
            <div class="overview-footer">
              <span :class="universityGrowth >= 0 ? 'up' : 'down'">
                <vab-icon :icon="['fas', universityGrowth >= 0 ? 'arrow-up' : 'arrow-down']" />
                {{ Math.abs(universityGrowth) }}%
              </span>
              <span class="period">较去年</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-icon" style="background-color: rgba(245, 34, 45, 0.1)">
            <vab-icon :icon="['fas', 'fire']" style="color: #f5222d" />
          </div>
          <div class="overview-content">
            <div class="overview-title">热门专业数</div>
            <div class="overview-data">{{ formatNumber(hotMajors) }}</div>
            <div class="overview-footer">

            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 高考分数线趋势和录取率分析图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :lg="16" :md="24" :sm="24" :xl="16" :xs="24">
        <el-card shadow="never">
          <div slot="header">
            <span>高考分数线趋势分析</span>
            <el-radio-group v-model="scoreTrendPeriod" size="mini" style="float: right;">
              <el-radio-button label="science">理科</el-radio-button>
              <el-radio-button label="liberal">文科</el-radio-button>
              <el-radio-button label="all">综合</el-radio-button>
            </el-radio-group>
          </div>
          <vab-chart autoresize :option="scoreTrendOption" style="height: 350px;" />
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card shadow="never">
          <div slot="header">
            <span>高考录取率分布</span>
          </div>
          <vab-chart autoresize :option="admissionDistributionOption" style="height: 350px;" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门大学和高考新闻 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <el-card shadow="never">
          <div slot="header">
            <span>热门大学排名</span>
          </div>
          <el-table :data="topUniversities" size="small" style="width: 100%">
            <el-table-column label="排名" prop="rank" width="60" />
            <el-table-column label="大学名称" prop="name" />
            <el-table-column label="录取分数线" prop="score" width="100" />
            <el-table-column label="变化" prop="change" width="100">
              <template slot-scope="scope">
                <span :class="scope.row.change >= 0 ? 'up' : 'down'">
                  {{ scope.row.change >= 0 ? '+' : '' }}{{ scope.row.change }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <el-card shadow="never">
          <div slot="header">
            <span>高考新闻动态</span>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(news, index) in gaokaoNews"
              :key="index"
              :color="news.color"
              :timestamp="news.time"
              :type="news.type"
            >
              {{ news.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>

    <!-- 功能入口卡片 -->
    <!-- <el-row :gutter="20" style="margin-top: 20px;">
      <el-col v-for="(item, index) in iconList" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
        <router-link :to="item.link">
          <el-card class="icon-panel" shadow="hover">
            <vab-icon :icon="['fas', item.icon]" :style="{ color: item.color }" />
            <p>{{ item.title }}</p>
          </el-card>
        </router-link>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
  import VabChart from '@/plugins/echarts'
  import { dependencies, devDependencies } from '../../../package.json'
  import { getNoticeList } from '@/api/notice'

  export default {
    name: 'Index',
    components: {
      VabChart,
    },
    data() {
      return {
        // 高考相关数据
        totalStudents: 10560000, // 全国考生人数
        studentGrowth: 3.2, // 考生人数增长率
        admissionRate: 42.8, // 本科录取率
        admissionRateGrowth: 1.5, // 录取率增长
        keyUniversities: 54, // 重点大学数量
        universityGrowth: 0, // 大学数量增长
        hotMajors: 50, // 热门专业数量

        scoreTrendPeriod: 'science', // 默认显示理科分数线

        // 高考分数线趋势图表配置
        scoreTrendOption: {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['一本线', '二本线', '三本线'],
            right: 10,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2018', '2019', '2020', '2021', '2022', '2023'],
          },
          yAxis: {
            type: 'value',
            name: '分数',
            axisLine: {
              lineStyle: {
                color: '#1890FF',
              },
            },
            axisLabel: {
              formatter: '{value} 分',
            },
          },
          series: [
            {
              name: '一本线',
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#1890FF',
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(24, 144, 255, 0.3)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(24, 144, 255, 0.1)',
                    },
                  ],
                },
              },
              data: [550, 548, 552, 555, 560, 565],
            },
            {
              name: '二本线',
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#52c41a',
              },
              data: [450, 445, 452, 458, 463, 470],
            },
            {
              name: '三本线',
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#faad14',
              },
              data: [380, 375, 382, 390, 395, 400],
            },
          ],
        },

        // 高考录取率分布图表配置
        admissionDistributionOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}% ({d}%)',
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['985工程', '211工程', '一本院校', '二本院校', '专科院校'],
          },
          series: [
            {
              name: '录取率分布',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 5, name: '985工程', itemStyle: { color: '#f5222d' } },
                { value: 10, name: '211工程', itemStyle: { color: '#fa8c16' } },
                { value: 25, name: '一本院校', itemStyle: { color: '#1890ff' } },
                { value: 40, name: '二本院校', itemStyle: { color: '#52c41a' } },
                { value: 20, name: '专科院校', itemStyle: { color: '#722ed1' } },
              ],
            },
          ],
        },

        // 热门大学数据
        topUniversities: [
          { rank: 1, name: '清华大学', score: 680, change: 5 },
          { rank: 2, name: '北京大学', score: 675, change: 3 },
          { rank: 3, name: '复旦大学', score: 650, change: 8 },
          { rank: 4, name: '上海交通大学', score: 645, change: 5 },
          { rank: 5, name: '浙江大学', score: 640, change: -2 },
        ],

        // 高考新闻数据
        gaokaoNews: [
          { content: '2023年全国高考报名人数突破1000万', time: '2023-06-01 10:30', type: 'primary', color: '#1890ff' },
          { content: '教育部发布2023年高考改革新政策', time: '2023-05-20 16:45', type: 'warning', color: '#faad14' },
          { content: '多地公布高考加分政策调整方案', time: '2023-05-15 14:20', type: 'success', color: '#52c41a' },
          { content: '高校专业调整：新增人工智能与大数据相关专业', time: '2023-05-10 09:15', type: 'info', color: '#909399' },
        ],

        // 高考相关功能入口
        iconList: [
          {
            icon: 'university',
            title: '院校查询',
            link: '/vab/player',
            color: '#1890ff',
          },
          {
            icon: 'book',
            title: '专业介绍',
            link: '/vab/table/comprehensiveTable',
            color: '#52c41a',
          },
          {
            icon: 'calculator',
            title: '分数预测',
            link: '/scorePrediction',
            color: '#faad14',
          },
          {
            icon: 'chart-line',
            title: '历年分数线',
            link: '/vab/markdownEditor',
            color: '#f5222d',
          },
          {
            icon: 'map-marked-alt',
            title: '地区分析',
            link: '/vab/codeEditor',
            color: '#722ed1',
          },
          {
            icon: 'graduation-cap',
            title: '志愿填报',
            link: '/vab/upload',
            color: '#13c2c2',
          },
          {
            icon: 'question-circle',
            title: '高考问答',
            link: '/vab/drag',
            color: '#eb2f96',
          },
          {
            icon: 'cog',
            title: '系统设置',
            link: '/vab/settings',
            color: '#95de64',
          },
        ],
      }
    },
    watch: {
      scoreTrendPeriod() {
        this.updateScoreTrendChart();
      }
    },
    created() {
      this.fetchData()
    },
    mounted() {
      // 保留原有的动态数据更新逻辑
      let base = +new Date(2020, 1, 1)
      let oneDay = 24 * 3600 * 1000
      let date = []

      let data = [Math.random() * 1500]
      let now = new Date(base)

      const addData = (shift) => {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        date.push(now)
        data.push(this.$baseLodash.random(20000, 60000))

        if (shift) {
          date.shift()
          data.shift()
        }

        now = new Date(+new Date(now) + oneDay)
      }

      for (let i = 1; i < 6; i++) {
        addData()
      }
      addData(true)
      this.fwl = this.fwl || {}
      this.fwl.xAxis = this.fwl.xAxis || [{}]
      this.fwl.series = this.fwl.series || [{}]
      this.fwl.xAxis[0].data = date
      this.fwl.series[0].data = data
      this.timer = setInterval(() => {
        addData(true)
        this.fwl.xAxis[0].data = date
        this.fwl.series[0].data = data
      }, 3000)
    },
    methods: {
      // 格式化数字方法
      formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      },

      // 跳转到专业页面
      goToMajorPage() {
        this.$router.push('/scorePrediction');
      },

      // 根据选择的类别更新高考分数线趋势图表
      updateScoreTrendChart() {
        // 根据选择的类别更新数据
        if (this.scoreTrendPeriod === 'science') {
          // 理科数据
          this.scoreTrendOption.series[0].data = [550, 548, 552, 555, 560, 565];
          this.scoreTrendOption.series[1].data = [450, 445, 452, 458, 463, 470];
          this.scoreTrendOption.series[2].data = [380, 375, 382, 390, 395, 400];
        } else if (this.scoreTrendPeriod === 'liberal') {
          // 文科数据
          this.scoreTrendOption.series[0].data = [530, 535, 540, 545, 550, 555];
          this.scoreTrendOption.series[1].data = [430, 435, 442, 448, 453, 460];
          this.scoreTrendOption.series[2].data = [360, 365, 372, 380, 385, 390];
        } else {
          // 综合数据
          this.scoreTrendOption.series[0].data = [540, 542, 546, 550, 555, 560];
          this.scoreTrendOption.series[1].data = [440, 440, 447, 453, 458, 465];
          this.scoreTrendOption.series[2].data = [370, 370, 377, 385, 390, 395];
        }
        // 强制更新图表
        this.$nextTick(() => {
          const chart = this.$refs.chart;
          if (chart) {
            chart.resize();
          }
        });
      },

      handleZrClick() {},
      handleChangeTheme() {
        this.$baseEventBus.$emit('theme')
      },
      async fetchData() {
        const res = await getNoticeList()
        this.noticeList = res.data
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 20px !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    .data-overview {
      .overview-card {
        display: flex;
        height: 226px;  /* 原来是108px，调整为140px */
        overflow: hidden;

        .overview-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 80px;
          margin-right: 15px;
          margin-top: 10px;  /* 添加上边距，使图标垂直居中 */
          border-radius: 8px;

          svg {
            font-size: 32px;
          }
        }

        .overview-content {
          flex: 1;
          padding: 15px 0;  /* 添加上下内边距 */

          .overview-title {
            margin-bottom: 12px;  /* 增加标题下方间距 */
            color: #909399;
            font-size: 14px;
          }

          .overview-data {
            margin-bottom: 15px;  /* 增加数据下方间距 */
            color: #303133;
            font-weight: bold;
            font-size: 24px;
          }

          .overview-footer {
            color: #909399;
            font-size: 12px;

            .up {
              color: #52c41a;
            }

            .down {
              color: #f5222d;
            }

            .period {
              margin-left: 8px;
            }
          }
        }
      }
    }

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 115px;
        }
      }

      .el-card {
        border-radius: 8px;
        transition: all 0.3s;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }

      .el-timeline-item__content {
        font-size: 14px;
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
      }

      svg {
        font-size: 40px;
        margin-top: 15px;
      }

      p {
        margin-top: 10px;
        font-size: 14px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }

    .up {
      color: #52c41a;
    }

    .down {
      color: #f5222d;
    }
  }
</style>
